<script setup lang="ts">
import { ref, watch } from 'vue';
import { OScroller, OInput, OIcon, vOutClick } from '@opensig/opendesign';
import IconSearch from '~icons/app/icon-search.svg';
import { useSearchingStore, useSearchHistoryStore } from '@/stores/common.ts';
import useDebounceFn from '@/composables/useDebounceFn.ts';
import { getSearchWordApi } from '@/api/api-search.ts';
import { useData } from 'vitepress';
import AppEmpty from '@/components/AppEmpty.vue';
import { oaReport } from '@/shared/analytics';

const searchStore = useSearchingStore();
const { lang } = useData();
// 联想关键词
const searchData = ref([]);
// 本次搜索值
const searchValue = ref('');
// 是否展示联想下拉框
const showPanel = ref(false);

watch(
  () => searchStore.keyword,
  () => {
    searchValue.value = searchStore.keyword;
  }
);
// -------------------- 回车搜索文档 --------------------
const searchHistoryStore = useSearchHistoryStore();
const enterSearchDoc = () => {
  confirmSearch(searchValue.value);
};
const clickSearchWord = (key: string) => {
  confirmSearch(key);
};
const confirmSearch = (val: string) => {
  searchValue.value = val;
  searchHistoryStore.add(val);
  searchStore.setKeyword(searchValue.value);
  searchStore.setIsSearching(true);
  showPanel.value = false;

  reportConfirmSearch();
};
const inputSearch = useDebounceFn(async () => {
  showPanel.value = true;
  const list = await getSearchWordApi(searchValue.value, lang.value);
  searchData.value = list.map((v) => {
    return {
      ...v,
      str: v.key.replaceAll(searchValue.value, `<span class="highlight">${searchValue.value}</span>`),
    };
  });
}, 300);

const clearInput = () => {
  showPanel.value = false;
  searchValue.value = '';
  searchStore.setIsSearching(false);
};
const clickOutside = () => {
  showPanel.value = false;
};
const focusInput = () => {
  if (searchValue.value) {
    showPanel.value = true;
  }
};

// 上报文档搜索
const reportConfirmSearch = () => {
  oaReport('input', {
    keyword: searchValue.value,
    $url: location.href,
  }, 'search_docs')
}
</script>

<template>
  <div class="doc-search">
    <OInput
      v-model="searchValue"
      size="large"
      :placeholder="'在本文档内搜索'"
      @keyup.enter="enterSearchDoc"
      @clear="clearInput"
      clearable
      @input="inputSearch"
      v-out-click="clickOutside"
      @focus="focusInput"
    >
      <template #prefix>
        <OIcon :style="{ fontSize: '24px' }">
          <IconSearch />
        </OIcon>
      </template>
    </OInput>
    <div :class="showPanel ? 'search-panel visible' : 'search-panel'" ref="target">
      <OScroller class="scroll" showType="always" size="small">
        <template v-if="searchData.length">
          <div
            v-for="item in searchData"
            :key="item.key"
            class="panel-item highlight-wrapper"
            @click="clickSearchWord(item.key)"
            v-dompurify-html="item.str"
          ></div>
        </template>
        <template v-else>
          <AppEmpty size="small">
            <template #description>暂无数据</template>
          </AppEmpty>
        </template>
      </OScroller>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.doc-search {
  position: relative;
  z-index: 99;

  :deep(.o-input) {
    width: 90%;
    transition: width var(--o-easing-standard-in) var(--o-duration-m2);

    .o_box {
      width: 100%;
    }
  }

  margin-bottom: 22px;
  height: 40px;
  width: 100%;
}

.search-panel {
  width: 90%;
  background-color: var(--o-color-fill2);
  padding: 0;
  box-shadow: none;
  border-radius: var(--o-radius-s);
  position: relative;
  z-index: 101;
  margin-top: 4px;
  color: var(--o-color-info1);
  .scroll {
    display: none;
  }
  &.visible {
    padding: 12px 0 12px 16px;
    box-shadow: var(--o-shadow-1);
    .scroll {
      display: flex;
    }
  }
}

.panel-item {
  @include text1;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--o-radius-s);
  height: 32px;
  line-height: 32px !important;
  cursor: pointer;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    background-color: var(--o-color-fill3);
  }
}

.scroll {
  transition: height var(--o-easing-standard-in) var(--o-duration-m2);
  max-height: 300px;
  padding-right: 16px;
}
</style>
